<template>
  <view class="safe-area-inset-bottom">
    <view class="swip_header">
      <view class="slot-box">
        <view style="width: 100%;">
          <uni-search-bar
              v-model="findApi"
              type="text"
              @confirm="handleQuery"
              @input="handleQuery"
              placeholder="请输入姓名或手机号码"/>
        </view>
      </view>
      <view class="swiplist">
        <swiperTabHead :tabBars="tabList" :tabIndex="tabIndex" @tabtap="tabtap"></swiperTabHead>
        <button size="mini" class="add_btn" @click="handleAdd">
          <i class="iconfont themeColor">&#xeaf3;</i>
          <span class="themeColor">新增</span>
        </button>
      </view>
    </view>
    <view class="listSwiperTop">
      <!-- 个人客户 -->
      <customer-Person v-if="tabIndex == 0" ref="customerPerson" :findApi="findApi"/>
      <!-- 企业客户 -->
      <customer-CompanyStaff v-if="tabIndex == 1" ref="customerCompanyStaff" :findApi="findApi"/>
      <!-- 企业信息 -->
      <customer-Company v-if="tabIndex == 2" ref="customerCompany" :findApi="findApi"/>
    </view>
  </view>
</template>

<script>
import swiperTabHead from "@/components/slideTab/slideTab"
import customerPerson from "./customerPerson"
import customerCompanyStaff from "./customerCompanyStaff"
import customerCompany from "./customerCompany"

export default {
  components: {swiperTabHead, customerPerson, customerCompanyStaff, customerCompany},
  data() {
    return {
      // tab标签
      tabList: [
        {title: '个人客户'},
        {title: '企业客户'},
        {title: '企业信息'}
      ],
      // 当前选中
      tabIndex: 0,
      // 查询参数
      findApi: undefined,
    }
  },
  /** 上拉刷新回调 */
  onReachBottom() {
    if (this.tabIndex == 0) {
      this.$refs.customerPerson.loadMore()
    } else if (this.tabIndex == 1) {
      this.$refs.customerCompanyStaff.loadMore()
    } else {
      this.$refs.customerCompany.loadMore()
    }
  },
  methods: {
    /** 接受子组件传过来的值点击切换导航 */
    tabtap(index) {
      // 标记已选项
      this.tabIndex = index;
      // 清空搜索框
      this.findApi = undefined;
      //滚动到页面的目标位置
      uni.pageScrollTo({scrollTop: 0, duration: 300});
      // 查询数据列表
      this.handleQuery();
    },
    /** 搜索 */
    handleQuery() {
      this.$nextTick(() => {
        if (this.tabIndex == 0) {
          this.$refs.customerPerson.handleQuery()
        } else if (this.tabIndex == 1) {
          this.$refs.customerCompanyStaff.handleQuery()
        } else {
          this.$refs.customerCompany.handleQuery()
        }
      })
    },
    /** 新增 */
    handleAdd() {
      if (this.tabIndex == 0) {
        this.$refs.customerPerson.handleAdd()
      } else if (this.tabIndex == 1) {
        this.$refs.customerCompanyStaff.handleAdd()
      } else {
        this.$refs.customerCompany.handleAdd()
      }
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-popup .uni-popup__wrapper {
  width: 90% !important;
  padding: 30rpx 0;
}

::v-deep .uni-popup-dialog {
  width: 100%;
}

</style>
